<template>
  <el-container>
    <div style="padding: 10px;padding-bottom: 0">
      <div class="report_header" ref="headerHeight">
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div class="report_header_left"></div>
          <div style="display: flex;align-items:flex-end;">
            <div class="report_header_date">
              <el-date-picker v-model="query.date" value-format="yyyy-MM-dd" type="daterange" align="right"
                              unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                              :picker-options="pickerOptions">
              </el-date-picker>
            </div>
            <div class="report_header_query">
              <el-select v-model="query.emoloyeeId" clearable placeholder="送货司机" @change="changeDelivery"
                         filterable @focus="getEmployeeList('')" :filter-method="queryEmployee" style="width: 100%">
                <el-option v-for="item in employee" :key="item.id" :label="item.name"
                        :value="item.id"/>
              </el-select>
            </div>

<!--            <div class="report_header_query">-->
<!--              <el-select  v-model="query.status" placeholder="请选择状态" clearable style="width: 100%">-->
<!--                <el-option label="未审核" value="0"></el-option>-->
<!--                <el-option label="已审核" value="1"></el-option>-->
<!--                <el-option label="已完成" value="2"></el-option>-->
<!--                <el-option label="已取消" value="3"></el-option>-->
<!--              </el-select>-->
<!--            </div>-->

            <div style="width:200px;margin-left: 10px;margin-top: 5px;">
            <queryShop @queryShopClick='queryShopClick'></queryShop>

            </div>

          </div>
          <div style="display: flex;flex-direction: row;justify-content: flex-end;width: 100%;">
            <div class="report_header_query">
              <el-input
                prefix-icon="el-icon-search"
                placeholder="领货单号"
                v-model="query.sn"
                style="width: 100%"
              ></el-input>
            </div>
          </div>
          <div style="display: flex;flex-direction: row;justify-content: flex-end">
            <el-button style="margin-left: 10px;margin-top: 7px;height: 100%" size="small" type="primary" @click="queryClick">查询
            </el-button>
<!--            隐藏显示按钮-->
<!--            <div @click="chooseClick" style="width: 46px;height: 32px;background-color: #409EFF;margin-top: 7px;margin-left: 10px;border-radius: 4px;display: flex;justify-content: center;align-items: center;">-->
<!--              <i style="font-size: 24px;color: white;" :class="[queryType == false?'el-icon-caret-bottom':'el-icon-caret-top']"></i>-->
<!--            </div>-->
            <el-button style="margin-left: 10px;margin-top: 7px;height: 100%" size="small" type="primary" @click="addClick"
                       v-permission="['picking.add']">新增
            </el-button>
          </div>
        </div>
        <div style="width: 800px;display: flex;align-items: center;" v-show="queryType == true">
<!--          这是放隐藏条件的容器-->
        </div>
      </div>
    </div>
    <div class="pd10" style="position:relative">
      <el-tabs type="border-card" @tab-click="tabsClick" style="postion:relative">
        <el-tab-pane label="全部" >
          <div class="details_card" v-loadMore="[payLoads,'picking-list']" :style="{height:curHeight+'px'}">
          <pickingList :pickingForm="pickingForm" @detailsClick="detailsClick"></pickingList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="未审核">
          <div class="details_card" v-loadMore="[payLoads,'picking-list0']" :style="{height:curHeight+'px'}">
            <pickingList  status="0" :pickingForm="pickingForm" @detailsClick="detailsClick"></pickingList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已审核">
          <div class="details_card" v-loadMore="[payLoads,'picking-list1']" :style="{height:curHeight+'px'}">
            <pickingList status="1" :pickingForm="pickingForm" @detailsClick="detailsClick"></pickingList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已完成">
          <div class="details_card" v-loadMore="[payLoads,'picking-list2']" :style="{height:curHeight+'px'}"  >
            <pickingList status="2" :pickingForm="pickingForm" @detailsClick="detailsClick"></pickingList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已取消">
          <div class="details_card" v-loadMore="[payLoads,'picking-list3']" :style="{height:curHeight+'px'}">
            <pickingList  status="3" :pickingForm="pickingForm" @detailsClick="detailsClick"></pickingList>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
<!--    <div class="pd10">-->
<!--      <div class="details_card" v-loadMore="[payLoads,'picking-list']" :style="{height:curHeight+'px'}">-->
<!--        <pickingList :pickingForm="pickingForm" @detailsClick="detailsClick"></pickingList>-->
<!--      </div>-->
<!--    </div>-->
    <el-footer class="el-footerBox" style="margin-bottom: auto">
      <pagination :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                  @pagination="loadOrder"></pagination>
    </el-footer>
  </el-container>
</template>

<script>
import { list as emoloyeeList } from '@/api/sysEmployee'
import { EventBus } from '@/api/eventBus'
import pickingList from './components/list'
import { list } from '@/api/picking'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import Pagination from '@/components/Pagination'
import utils from '../../utils/utils.js'
import loadMore from '@/utils/more.js'
import permission from '@/directive/permission/index.js' // 权限判断指令
import queryShop from '@/components/Query/queryShop'
export default {
  name: 'picking-list',
  directives: { loadMore, permission, elDragDialog },
  activated() {
    this.payLoads = new Date().getTime()
  },
  data() {
    return {
      payLoads: '',
      pickingForm: [],
      employee: [],
      times: '',
      pageNum: 1,
      pageSize: 20,
      queryClicked: false,
      saveClicked: false,
      total: 0,
      curHeight: null,
      queryType: false,
      query: {
        shippingEmployeeId: '',
        date: [],
        status: '',
        sn: '',
        shopId:''
      },
      keyword: {
        emoloyeeId: '',
        date: [],
        status: '',
        sn: ''
      },
      pickerOptions: {//时间快捷选择
        shortcuts: [{
          text: '昨天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  components: {
    Pagination, pickingList,queryShop
  },
  created() {
    var _this = this;
    this.loadOrder();
    EventBus.$on('picking-add', res => { // 监听新增完毕
      // 更新列表数组
      // _this.pickForm.splice(0, 0, res)
      _this.pickingForm.splice(0, 0, res)
    })
    EventBus.$on('picking-edit', res => { // 监听状态更新
      // 更新列表数组
      for (var i = 0; i < _this.pickingForm.length; i++) {
        if (_this.pickingForm[i].id == res.id) {
          _this.$set(this.pickingForm, i, res)
        }
      }
    })
    EventBus.$on('picking-delete', res => { // 监听订单删除
      // 更新列表数组
      /* for (var i = 0; i < _this.orderForm.length; i++) {
        if (_this.orderForm[i].id == res.id) {
          _this.orderForm.splice(i,1)
          return;
        }
      } */
      this.loadOrder()
    })
    EventBus.$on('picking-view', res => { // 监听订单删除
      // 更新列表数组
      for (var i = 0; i < _this.pickingForm.length; i++) {
        if (_this.pickingForm[i].id == res.id) {
          _this.$set(this.pickingForm, i, res)
        }
      }
    })
  },
  mounted() {
    this.comeIn()
    this.beforeMount()
  },
  methods: {
       queryShopClick(data){
        console.log(data)
        this.query.shopId = data.shopId
        // this.shopname=data.name
      },

    tabsClick(data) {
      var _this = this
      this.pagenum=data.paneName
      // console.log(data.paneName)
      // if(data.paneName==3){
      //   _this.loadOrder()
      //   _this.obtain=true
      // }else{
      //   _this.obtain=false
      //
      // }
      switch (data.paneName) {
        case '0':
          _this.query.status = ''
          this.loadOrder() // 状态
          break
        case '1':
          console.log(data.paneName , '详情')
          _this.query.status = 0 // 状态
          this.loadOrder()
          break
        case '2':
          console.log(data.paneName , '详情')
          _this.query.status = 1 // 状态
          this.loadOrder()
          break
        case '3':
          console.log(data.paneName , '详情')
          _this.query.status = 2 // 状态
          this.loadOrder()
          break
        case '4':
          console.log(data.paneName , '详情')
          _this.query.status = 3 // 状态
          this.loadOrder()
          break

      }
    },

    beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          if (_this.queryType == false) {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            _this.curHeight = h - 265//减去页面上固定高度height
          } else {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            _this.curHeight = h - 224//减去页面上固定高度height
          }
        })()
      }
    },
    comeIn() {
      var h = document.documentElement.clientHeight || document.body.clientHeight
      this.curHeight = h - 224//减去页面上固定高度height
    },
    loadOrder() {
      var _this = this
      if (utils.isNull(this.query.date)){
        this.query.date = []
      }
      let params = new URLSearchParams()
      params.append('pageNum', _this.pageNum)
      params.append('pageSize', _this.pageSize)
      params.append('status', this.query.status)
      params.append('sn', this.query.sn)
      params.append('shippingEmployeeId', this.query.shippingEmployeeId)
      params.append('startDate', this.query.date.length > 0 ? this.query.date[0] : '')
      params.append('endDate', this.query.date.length > 0 ? this.query.date[1] : '')
      params.append('shopId', this.query.shopId)

      list(params).then(response => {
        _this.pickingForm = response.data.data
        _this.total = response.data.total
      }).catch(error => {
        console.log('error!!')
      })
    },
    chooseClick() {
      this.queryType = !this.queryType
      if (this.queryType == true) {
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.curHeight = h - 265//减去页面上固定高度height
      } else {
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.curHeight = h - 224//减去页面上固定高度height
      }
    },
    queryClick() {
      this.queryClicked = true
      setTimeout(() => {
        this.queryClicked = false
      }, 300)
      this.keyword = this.query
      this.pageNum = 1
      this.loadOrder()
      // this.obtainshippingList()
    },
    resetClick() {
      this.query.date = []
      this.productName = ''
      this.supplierName = ''
      this.query.sn = ''
      this.query.supplierId = ''
      this.query.productId = ''
      this.query.status = '',
        this.keyword = this.query
      this.pageNum = 1
      this.loadOrder()
    },
    detailsClick(data) {
      this.$router.push({
        path: '/picking/view', query: { id: data }
      })
    },
    addClick() {
      this.$router.push({
        path: '/picking/add'
      })
    },

    changeDelivery(val){
      this.query.shippingEmployeeId = val;
    },

    queryEmployee(query) {
      this.getEmployeeList(query)
    },
    getEmployeeList(query) {
      let param = new URLSearchParams()
      param.append('name', query)
      emoloyeeList(param).then(res => {
        console.log(res)
        console.log('送货员')
        this.employee = res.data.data
      })
    },
  }
}
</script>

<style scoped>
.details_card {
  overflow: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
}

.elOption {
  background-color: #909399;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 40px
}

.details_card:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.el-input__inner {
  width: 100% !important;
}

.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/ .el-header {
  padding: 10px;
  /* height: 100% !important; */
  padding-bottom: 0;
}

.report_header {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background-color: rgba(248, 248, 248, 0.8);
  display: flex;
  padding-bottom: 5px;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
  flex-direction: column;
}

.report_header_left {
  width: 5px;
  height: 46px;
  background-color: #409EFF;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.report_header_query {
  margin-left: 10px;
  /* width: 180px; */
  margin-top: 5px;
}

.report_header_date {
  margin-left: 10px;
  width: 250px;
  margin-top: 5px;
}
</style>
